<script setup>
import {computed, onMounted, ref} from 'vue'
import {getCollegesWithClasses, addNewCollege, addNewClass,deleteClassById,updateClassById} from '@/api/admin.js'
import {ElDialog, ElMessage, ElMessageBox} from 'element-plus'
import {Message, OfficeBuilding, Phone, Reading, School, UserFilled} from '@element-plus/icons-vue'

// 存储学院和班级列表
const activeCollegeIds = ref([]);
const colleges = ref([]);

// 添加学院相关状态
const isAddCollegeDialogVisible = ref(false);
const newCollegeName = ref('');

// 添加班级相关状态
const isAddClassDialogVisible = ref(false);
const newClassName = ref('');
const selectedCollegeId = ref(null); // 记录当前选择的学院ID

// 编辑班级相关状态
const isEditClassDialogVisible = ref(false);
const editClassData = ref({ name: '', classId: null, collegeId: null }); // 编辑班级的初始数据

// 获取学院及班级列表
const getList = async () => {
  try {
    const resp = await getCollegesWithClasses(); // 调用后端 API
    colleges.value = resp.data; // 将后端返回的学院数据存入 colleges
  } catch (error) {
    ElMessage.error('获取学院和班级信息失败');
  }
};

// 打开添加学院的对话框
const openAddCollegeDialog = () => {
  isAddCollegeDialogVisible.value = true;
};

// 打开添加班级的对话框
const openAddClassDialog = (collegeId) => {
  selectedCollegeId.value = collegeId; // 记录当前选择的学院
  isAddClassDialogVisible.value = true;
};

// 关闭对话框
const closeDialog = () => {
  isAddCollegeDialogVisible.value = false;
  newCollegeName.value = '';
};

const closeClassDialog = () => {
  isAddClassDialogVisible.value = false;
  newClassName.value = '';
  selectedCollegeId.value = null;
};

// 提交新学院
const submitNewCollege = async () => {
  if (!newCollegeName.value) {
    ElMessage.error('学院名称不能为空');
    return;
  }

  try {
    await addNewCollege({ name: newCollegeName.value });
    ElMessage.success('学院添加成功');
    closeDialog();
    getList(); // 重新获取学院列表
  } catch (error) {
    ElMessage.error('添加学院失败');
  }
};

// 提交新班级
const submitNewClass = async () => {
  if (!newClassName.value || !selectedCollegeId.value) {
    ElMessage.error('班级名称不能为空');
    return;
  }

  try {
    await addNewClass({ name: newClassName.value, collegeId: selectedCollegeId.value });
    ElMessage.success('班级添加成功');
    closeClassDialog();
    getList(); // 重新获取学院列表
  } catch (error) {
    ElMessage.error('添加班级失败');
  }
};

// 打开编辑班级对话框
const openEditClassDialog = (classItem) => {
  editClassData.value = { ...classItem }; // 将要编辑的班级数据赋值到 editClassData
  isEditClassDialogVisible.value = true;
};

// 提交班级修改
const submitEditClass = async () => {
  const { name, classId } = editClassData.value;
  if (!name || !classId) {
    ElMessage.error('班级名称不能为空');
    return;
  }

  try {
    await updateClassById(classId, { name });
    ElMessage.success('班级修改成功');
    isEditClassDialogVisible.value = false;
    getList(); // 重新获取学院列表
  } catch (error) {
    ElMessage.error('修改班级失败');
  }
};

//删除班级
const deleteClass = async (classId) => {
  try {
    await ElMessageBox.confirm('此操作将永久删除该班级，是否继续？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    await deleteClassById(classId);
    ElMessage.success('删除成功');
    getList();
  } catch (error) {
    if (error === 'cancel') {
      ElMessage.info('删除已取消');
    } else {
      ElMessage.error('删除失败，请重试');
    }
  }
};

onMounted(() => {
  getList(); // 组件挂载时，获取学院及班级列表
});
</script>

<template>
  <div class="college-list">
    <!-- 添加学院的按钮 -->
    <div class="add-college">
      <el-button type="primary" icon="el-icon-plus" @click="openAddCollegeDialog">添加学院</el-button>
    </div>

    <!-- 学院列表 -->
    <el-collapse v-model="activeCollegeIds" class="college-collapse">
      <el-collapse-item
        v-for="college in colleges"
        :key="college.collegeId"
        :title="college.name"
        :name="college.collegeId"
        class="college-item"
      >
        <!-- 添加班级按钮 -->
        <div class="add-class">
          <el-button type="success" icon="el-icon-plus" @click="openAddClassDialog(college.collegeId)">
            添加班级
          </el-button>
        </div>
        <!-- 班级列表 -->
        <ul class="class-list">
          <li v-for="classItem in college.classes" :key="classItem.classId">
            <div class="class-item">
              {{ classItem.name }}
              <div class="class-actions">
                <el-button size="mini" type="primary" @click="openEditClassDialog(classItem)">修改</el-button>
                <el-button size="mini" type="danger" @click="deleteClass(classItem.classId)">删除</el-button>
              </div>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>

    <!-- 添加学院的弹框 -->
    <el-dialog
      v-model="isAddCollegeDialogVisible"
      title="添加学院"
      width="30%"
      @close="closeDialog"
    >
      <el-input v-model="newCollegeName" placeholder="请输入学院名称"></el-input>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="submitNewCollege">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加班级的弹框 -->
    <el-dialog
      v-model="isAddClassDialogVisible"
      title="添加班级"
      width="30%"
      @close="closeClassDialog"
    >
      <el-input v-model="newClassName" placeholder="请输入班级名称"></el-input>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeClassDialog">取消</el-button>
          <el-button type="primary" @click="submitNewClass">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑班级的弹框 -->
    <el-dialog
      v-model="isEditClassDialogVisible"
      title="修改班级"
      width="30%"
    >
      <el-input v-model="editClassData.name" placeholder="请输入班级名称"></el-input>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isEditClassDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEditClass">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<style scoped>
.college-list {
  margin: auto;
  width: 800px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.add-college {
  margin-bottom: 20px;
  text-align: right;
}

.college-collapse {
  border: none;
}

.college-item {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-bottom: 10px;
}

.add-class {
  text-align: right;
  padding: 10px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ebeef5;
}

.class-list {
  list-style-type: none;
  padding: 0;
  background-color: #fafafa;
  border-radius: 4px;
}

.class-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
  transition: background-color 0.3s;
}

.class-item:hover {
  background-color: #eef1f6;
}

.class-actions {
  display: flex;
  gap: 10px;
}
</style>
